<template>
  <div class="whe_maxv wh_f log_ba xd">
    <el-switch
        class='switch jd'
        ref='switchRef'
        v-model="isDark"
        @click="changeSwitch"
        :active-action-icon="Moon"
        :inactive-action-icon="Sunrise"
        style="--el-switch-on-color: #4e69fd; --el-switch-off-color: #ff4c00;right: 10px;top: 10px;z-index: 10"
    />
    <el-button class="jd" type="primary" @click="addGo" style="right: 80px;top: 10px;z-index: 10">数据看板</el-button>
<!--    左侧-->
    <div class="flex_2 he_max mbl xd jz_flex" style="overflow: hidden;">
<!--      背景块-->
      <div class="bj_css"></div>
      <div class="pad_20_0 fz_24 em jd wh_max " style="left: 0;top: 0">
        <span class="mx-5 em fz_24 mag_l-20">小马鲜生 XiaoMa</span>
      </div>
      <div class="fz_30 em">
        <div>
          <Loning_Log class="jz logoCss"></Loning_Log>
        </div>
        <div>
          <span class="mx-5 xt fz_36 mag_l-20">多商户鲜生分销后台管理系统</span>
        </div>
        <div>
          <span class="mx-5 xt fz_20 mag_l-20 xt">高性能 高效率 高可视</span>
        </div>
      </div>
    </div>
<!--  右侧 -->
    <div class="flex_1 he_max jz_flex xd">
      <div class=" bor_10" style="padding: 34px">
        <div class="">
          <span class="mx-5 fz_32 em">欢迎回来</span>
        </div>
        <div class="pad_b_30">
          <span class="mx-5 fz_14">请输入您的帐户信息以开始管理您的项目</span>
        </div>
<!--        <div class="pad_b_20">-->
<!--          <el-select v-model="platform" placeholder="请选择登录端">-->
<!--            <el-option label="商户端" :value="1" />-->
<!--            <el-option label="管理端" :value="2" />-->
<!--          </el-select>-->
<!--        </div>-->
        <div class="pad_b_30">
          <el-input size="large" v-model="form.username" placeholder="账号" />
        </div>
        <div class="pad_b_30">
          <el-input size="large" show-password v-model="form.password" type="password" placeholder="密码" />
        </div>
        <div class="pad_b_30 xd">
          <siderVerift :class="sider_border?'border_red':''" class="boxs" @siderValue="sider" ref="SelectDivchildren"></siderVerift>
          <div v-if="sider_border" class="jd" style="bottom: 0px">
            <span class="wz_red fz_14">请先完成验证!</span>
          </div>
        </div>
        <div class="split_8_2 pad_b_30 xt fz_16">
          <div>
          <el-checkbox :value="okUsername" name="type">
            记住账号
          </el-checkbox>
          </div>
          <div><span class="xsgb wz_blue">忘记密码</span></div>
        </div>
        <div>
          <button @click="loginAdd" class="tdbutton">登录</button>
        </div>
      </div>
      <div class="jd wh_max wz_jz" style="bottom: 20px;left: 0">
        Copyright © 2024 小马鲜生
      </div>
    </div>
  </div>
  <div v-if="false" class="whe_max ba_svg">
    <div class="wh_f he_max">
      <div class="flex_1 jz_flex">
        <div>
          <div>所有伟大都来源于一次勇敢的开始</div>
          <div class="fz_30">多商户分销系统</div>
        </div>
      </div>
      <div class="flex_1 he_max jz_flex">
        <div class="ba_white" style="padding: 40px">
          <div class="fz_26 em pad_b_20">登录</div>
          <div class="pad_b_20">
            <el-input v-model="form.username" placeholder="账号" />
          </div>
          <div class="pad_b_20">
            <el-input show-password v-model="form.password" type="password" placeholder="密码" />
          </div>
          <div class="wz_rigdq pad_b_20 wz_blue">
            <span style="color:#ab0d0d;!important;">忘记密码?</span>
          </div>
          <div>
            <button @click="loginAdd" class="ysysbutton">Login</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
// 引入pinia
import {storeVuex} from  '@/store/modules/user'
import {storeToRefs} from "pinia";
const Vuex = storeToRefs(storeVuex())
import Loning_Log from '@/components/Loning_Log/index.vue'
import siderVerift from '@/components/sliderVerify/index.vue'
import { user,Adminroot } from '@/api/index'
// 引入router
import { useRouter } from "vue-router";
import {onMounted, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import {Moon, Sunrise} from "@element-plus/icons-vue";
const router = useRouter();
let platform = ref();

const vuex = storeVuex()
// 暗黑模式按钮状态开关默认为关闭 (与切换方法无关)
const isDark = ref(vuex.isDarkMode)
let switchRef = ref(null)

function changeSwitch() {
  vuex.isDarkMode=!vuex.isDarkMode
  // 创建一个视图过渡动画，用于在切换深色模式时优化用户体验-->
  // @ts-ignore
  const transition = document.startViewTransition(() => {
    // 切换HTML文档的dark类，以激活或停用深色模式-->
    document.documentElement.classList.toggle('dark')
  })
  // 当视图过渡动画准备就绪时执行以下代码-->
  transition.ready.then(() => {
    // 获取switch组件的DOM元素，用于计算过渡动画的起点-->
    // @ts-ignore
    const switchElement = switchRef.value?.$el
    // 计算switch组件中心点的坐标-->
    const rect = switchElement.getBoundingClientRect()
    const x = rect.left + rect.width
    const y = rect.top + rect.height
    // 计算过渡动画结束时的圆半径，确保覆盖整个视口-->
    const endRadius = Math.hypot(
        Math.max(x, innerWidth - x),
        Math.max(y, innerHeight - y),
    )
    // 创建clipPath数组，定义了过渡动画的起始和结束形状-->
    const clipPath = [
      `circle(0 at ${x}px ${y}px)`,
      `circle(${endRadius}px at ${x}px ${y}px)`,
    ]
    // 在HTML文档的根元素上启动一个动画，根据当前是否为深色模式来决定动画的方向-->
    document.documentElement.animate(
        {
          clipPath: isDark.value ? clipPath.reverse() : clipPath,
        },
        {
          duration: 400, // 动画持续时间-->
          pseudoElement: isDark.value
              ? '::view-transition-old(root)'
              : '::view-transition-new(root)', // 根据深色模式状态选择伪元素-->
        },
    )
  })
}

onMounted(()=>{
  if (isDark.value) {
    document.documentElement.classList.toggle('dark');
  }
})

const addGo = ()=>{
  router.push('/DataAdmin')
}
const okUsername = ref()
const form = reactive({
  username:vuex.username,
  password:""
})
// 验证框的红色警告开关
const sider_value = ref(false)
const sider_border = ref(false)
const sider = (e:boolean)=>{
  sider_value.value = e
  sider_border.value = !e
}
// 登录操作
const loginAdd = async () => {
  if(!sider_value.value){
    sider_border.value  = true
    return;
  }
  const res:any = await user.Login(form.username,form.password);
  // 登陆成功后执行
  if(res.data.status == 1){
    Vuex.userType_id.value = res.data.userInfo.userType_id //缓存用户店铺凭证
    Vuex.userInfo.value = res.data.userInfo //缓存用户信息
    Vuex.accessToken.value = res.data.token //缓存用户token
    // // 获取用户权限组
    storeVuex().getUserRoot(res.data.userInfo.root);
    // // 获取用户可访问的导航栏
    storeVuex().getUserRootMenu(form.username);
// @ts-ignore
    if(Vuex.MenuList.value[0].children){
      vuex.username = form.username
       setTimeout(()=>{
// @ts-ignore
         router.push(Vuex.MenuList.value[0].children[0].path)
         //router.push('/dashboard/dataAnalyse')
       },500)
// @ts-ignore
    }else{
      ElMessage.error('该账号暂无可访问的页面,请联系管理员 !');
    }
    // 跳转页面
    // setTimeout(()=>{
    //   router.push('/dashboard/dataAnalyse')
    // },500)
  }else{
    //登录不成功
    ElMessage({
      // @ts-ignore
      message: res.data.msg,
      type: res.data.status == 1 ? 'success' : 'error'
    })
  }
}
</script>
<style>
::view-transition-new(root),
::view-transition-old(root) {
  /* 关闭默认动画，否则影响自定义动画的执行 */
  animation: none !important;
}

/*黑暗模式下，让旧节点的层级变高，否则会导致动画出不来*/
.dark::view-transition-old(root) {
  z-index: 10000000;
}
</style>
<style scoped>
.logoCss{
  animation: bounce 2s infinite; /* 指定动画名，持续时间，宽度 */
}
@keyframes bounce {
  0% {
    transform: translateY(0); /* 从初始位置开始 */
  }
  50% {
    transform: translateY(-20px); /* 向上移动 20px */
  }
  100% {
    transform: translateY(0); /* 回到初始位置 */
  }
}
.border_red{
  border: 1px solid red;
  box-sizing: border-box;
}
.bj_css{
  border-radius: 20%;
  position: absolute;
  z-index: -1;
  background-color: #27578d;
  filter: blur(150px);
  height: 30%;
  width: 100%;
  left: 0%;
  display: block;
  transform: rotate(-35deg);
}
</style>
